<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
     *{margin:0;padding:0;}
      ul{
          list-style: none;
          line-height: 50px;
          background: #5f5f5f;
          font-size:0;
      }
      li{
          display: inline-block; 
          width:100px;
          text-align: center;
          cursor: pointer;
          color:#fff;
          font-size: 14px;
          vertical-align: bottom;
      } 
      li:hover{
          background-color: #111;
      }
      .current{
          background-color: #4caf50;
      }
    </style>
</head>
<body>
    <ul>
        <li class="current">HTML</li>
        <li>CSS</li>
        <li>JAVASCRIPT</li>
    </ul>
    <script>
     window.onload=function(){
         var lis=document.getElementsByTagName("li");
         for(let i=0;i<lis.length;i++){
             lis[i].onclick=function(){
                 for(let i=0;i<lis.length;i++){
                     lis[i].style.backgroundColor="#5f5f5f"
                 }
                 this.style.backgroundColor="#4caf50"
             }
         }
     }
    </script>
</body>
</html>